<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>聊天</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/chat.css">
</head>

<body>
<img style="width:100%;height:100%" src="img/chat_bg.jpg">


<div class="abs cover contaniner" id="app">
    <div class="abs cover pnl">
        <!--标题头区域-->
        <div class="top pnl-head" style="padding: 10px ; color: white;">
            <button @click="goToChange" style="background-color: transparent; border: none; color: white;">返回</button>
            <div id="userName">
                用户：{{username}}
            </div>
            <div id="chatMes" v-show="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体">
                正在和 <font face="楷体">{{toName}}</font> 聊天
            </div>
        </div>
        <!--聊天区开始-->
        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
                <!--这个是以isShowChat为标识符-->
                <div class="abs cover pnl-left" id="chatArea" >
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
                        <div class="pnl-list" id="msgs" v-for="historyMessage in this.historyMessages">

                            <!-- 消息这展示区域 -->
                            <div class="msg guest" v-if="historyMessage.toUserId === fromUser.id">
                                <div class="msg-right">
                                    <div class="msg-host photo" :style="{ 'background-image': 'url(' + imageUrl2 + ')' }"></div>
                                    <div class="msg-ball">{{ historyMessage.context }}</div>
                                </div>
                            </div>
                            <div class="msg robot" v-if="historyMessage.toUserId === toUser.id">
                                <div class="msg-left" worker="">
                                    <div class="msg-host photo" :style="{ 'background-image': 'url(' + imageUrl1 + ')' }"></div>
                                    <div class="msg-ball">{{ historyMessage.context }}</div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="abs bottom pnl-text">
                        <div class="abs cover pnl-input">
                            <textarea class="scroll" id="context_text" @keyup.enter="submit" wrap="hard" placeholder="在此输入文字信息..."
                                      v-model="sendMessage.context"></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>

                        <div class="abs br pnl-btn" id="submit" @click="submit"
                             style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
                            发送
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    let ws;
    new Vue({
        el: "#app",
        data() {
            return {
                message:[],
                isShowChat: true,
                chatMes: true,
                isOnline: true,
                username:"",
                toName: "",
                toUser:{
                    userName:'',
                    id:'',
                },
                fromUser:{
                    identity:0,
                  userName:'',
                  id:'',
                },
                sendMessage: {
                    context:"",

                },
                inputMessage: "",
                historyMessages: [
                ],
                pollingTimer:null,
                imageUrl1:"",
                imageUrl2:'',
                getMessage:[],
            }
        },
        created() {
            this.init();

        },
        methods: {

            async init() {
                await axios.get("User/getUserName").then(res => {
                    this.fromUser = res.data;
                    this.imageUrl2=this.fromUser.imagPath;
                    this.username=this.fromUser.userName;
                    this.sendMessage .toUserId=this.fromUser.id;
                });
                await this.init2();

            },
            async init2() {
                await axios.get("User/getToUserName"+location.search).then(res => {
                    this.toUser = res.data;
                    this.toName=this.toUser.userName;
                    this.imageUrl1=this.toUser.imagPath;

                });
                await this.init3();
            },
            async init3() {
                await axios.get("Message/selectAllHasReadMessages?fromId="+this.fromUser.id+"&toId="+this.toUser.id).then(res => {
                    if(res.data!=="null"){
                        this.historyMessages=res.data;
                    }
                });
                this.pollingTimer = setInterval(this.pollMessages, 5000); // 每5秒轮询一次
            },


            submit() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/ChenXufeng_Fengchao_System/Message/addMessage?fromId="+this.fromUser.id+"&toId="+this.toUser.id, // 确保URL路径正确
                    data: _this.sendMessage,

                }).then(resp => {

                })
                this.historyMessages.push(_this.sendMessage);
                this.clean();

            },
            async pollMessages() {
                try {
                    // 发送轮询请求并等待响应
                    const response = await axios.get("Message/getMessage?fromId="+this.fromUser.id+"&toId="+this.toUser.id);
                    // 处理收到的消息
                    if(response!== "null"){
                        console.log(response)
                        this.getMessage=response.data;
                        this.historyMessages.push(this.getMessage[0]);
                        this.getMessage=[];
                    }
                } catch (error) {
                    console.error("轮询消息时发生错误：" + error);
                }
            },
            goToChange(){
                clearInterval(this.pollingTimer);
                if(this.fromUser.identity===0){
                    window.location.href = 'user.html';
                }else{window.location.href = 'courier.html';

                }
            }

        },
        beforeDestroy() {
            // 组件销毁时清除定时器
            clearInterval(this.pollingTimer);
        },
        clean(){
            this.sendMessage.context="";
        },



    });



</script>

</body>
</html>